<template>
	<div class="wy-main  message-receive">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">消息接收人管理</span>
					<a-button class="title-button" @click="elasticShowModal">新增联系人</a-button>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<div class="my-main-cont">
			<a-table :columns="columns" :pagination="pagination" @change="handleTableChange" :loading="loading" :dataSource="dataList" style="margin-top: 10px;">
				<span slot="operation" slot-scope="text, record">
			      <a href="javascript:;" @click="editRessBook(record)">修改</a>
			      <a-divider type="vertical" />
			      <a href="javascript:;" @click="deleteRessBook(record.addressBookId)">删除</a>
			    </span>
			</a-table>
		</div>
		<!-- 弹框 -->
		<Elastic @close='close' ref='elastic'></Elastic>
		<Edit @close='close' ref='edit'></Edit>
	</div>
</template>
<script>
import Elastic from './components/Elastic'
import Edit from './components/edit'
	const columns = [{
		title: '姓名',
		dataIndex: 'realName'
	},{
		title: '手机号',
		dataIndex: 'linkMobile'
	}, {
		title: '邮箱',
		dataIndex: 'linkMail',
		key: 'mail',
	}, {
		title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation'
		}
	}];

	export default {
		 components: {
					Elastic,
					Edit
   		 },
		data() {
			return {
				dataList: [],
				columns,
				confirmLoading: false,
				loading:false,
				pagination: {
				  pageSizeOptions: ['10', '20', '30', '40', '100'],
				  defaultCurrent: 1,
				  defaultPageSize: 10,
				  total:0,
				  showSizeChanger: true,
				  showTotal: (total, range) => `共 ${total} 条记录`
				},
			}
		},
		beforeCreate() {
		},
		created () {
			this.getRessBook();
		},
		methods: {
			close(){
				this.getRessBook()
			},
			elasticShowModal(){
		        this.$refs.elastic.showModal();
			},
				//编辑消息人列表
			editRessBook(data) {
				this.$refs.edit.showModal(data);
			},
			// 获取消息人列表
			getRessBook() {
				this.loading = true
				this.$get('/info/addressBook',{
					pageSize : this.pagination.defaultPageSize,
					pageNum : this.pagination.defaultCurrent
				},true).then((r) => {
					console.log('r2:',r.data.data)
					this.loading = false
					this.dataList = r.data.data.rows;
					this.pagination.total = r.data.data.total
	            }).catch((e) => {})
			},
			// 删除消息人
			deleteRessBook(id) {
				console.log(id)
				let that = this
				this.$confirm({
					title: '确定删除所选中的记录?',
				    content: '当您点击确定按钮后，这些记录将会被彻底删除',
					centered: true,
					onOk () {
							that.$delete('/info/addressBook/'+id).then((r) => {
							that.$message.success('删除成功')
					    	that.getRessBook()
	            }).catch((e) => {})
					}
				})
			},
			handleTableChange (pagination, filters, sorter) {
			   this.pagination.defaultPageSize = pagination.pageSize
			   this.pagination.defaultCurrent  = pagination.current
			   this.getRessBook()
			},
		}
	}
</script>

<style lang="less" scoped>
.message-receive{
	.ant-btn{
		height:30px !important;
		font-size:14px !important;
		color:#FFFFFF !important;
		background:#15837A !important;
		border:none;
		outline:none;
		text-align:center;
		line-height:30px;
	}
	table{
		width:1200px;
		height:400px;
		thead{
		  td{
		  	text-align:center;
		  }
		  th{
  	  		padding:10px 16px !important;
  	  		font-size:16px;
  	       }
		}
	}
 
}
</style>